<template>
  <div class="container">
    <div class="left">
      <el-image :src="logo" fit="contain" class="logo" @click="linkToHome" />
      <TopicSetting v-if="isTopicGeneratePage" />
    </div>
    <div class="right">
      <div class="search">
        <el-input
          v-if="isHomePage"
          class="custom-input input__default_theme"
          v-model="headerInput.subjectName"
          :placeholder="$t('header.header_item_line1')"
          :clearable="false"
          size="large"
          @change="onChange"
        >
          <!-- 使用 suffix 插槽追加图标 -->
          <template #suffix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div class="select" style="width: 380px" v-if="isHomePage">
        <div style="display: flex; align-items: center">
        <span class="select-label">{{$t('header.header_item_line2')}}</span>
        <div class="select-wrapper">
          <el-select v-model="headerInput.grade"
                     size="large"
                     clearable
                     @change="onChange"
                     :placeholder="$t('header.header_item_line3')"
                     class="input__default_theme"
                     style="border-radius: 10px">
            <el-option
              v-for="item in options"
              :key="item.grade"
              :label="item.grade === 0? $t(item.gradeName) : locale === 'EN'? 'K' + item.gradeName : item.gradeName + $t('grade.grade')"
              :value="item.grade"
            />
          </el-select>
        </div>
        </div>
        <el-button  size="large" class="buttons-primary" style="width: 120px" @click="toGenerate" type="primary">
          {{$t('header.header_item_line4')}}
        </el-button>
      </div>
      <el-button class="buttons-default header-preview" size="large" v-if="isTopicGeneratePage" icon="view" @click="onPreview">
        {{$t('header.header_item_line5')}}
      </el-button>
      <div class="users">
        <el-popover
          placement="top-start"
          :width="200"
          v-if="showPopover"
          trigger="hover"
        >
          <template #default>
            <div class="user-info">
              <div class="user-name">
                <el-icon class="user-icon"><UserFilled /></el-icon>
                {{userInfoStore.userInfo?.user?.username}}
              </div>
              <div class="logout">
                <el-button  @click="onLogout" type="danger">
                  {{$t('header.header_item_line6')}}
                </el-button>
              </div>

            </div>
          </template>
          <template #reference>
            <div>
              <el-avatar shape="circle" :size="50" fit="contain" :src="getUserIcon" />
              <img src="@/assets/renewal.png" alt="renewal" />
            </div>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import TopicSetting from "@cs/TopHeader/Topic-Setting/Topic-Setting.vue";
import {useRouter} from "vue-router";
import {useUserInfoStore} from "@/stores/user";
import type { Grade } from "@/interface/Grade";
import {useHeaderInputStore} from "@/stores/headerInput";
import type { HeaderInput } from "@/interface/HeaderInput";
//@ts-ignore
import pub from "vc-subscribe-publish";
import { USER_INFO_KEY } from "@/libs/KEY";
import { useI18n } from "vue-i18n";
import { UserFilled } from "@element-plus/icons-vue";

const userIcon = new URL("@/assets/user.webp", import.meta.url).href;
const logo = new URL("@/assets/logo@2x.png", import.meta.url).href;
const headerInputStore = useHeaderInputStore();
const isHomePage = ref<boolean>(false);
const isTopicGeneratePage = ref<boolean>(false);
const router = useRouter();
const showPopover = ref(true);
const userInfoStore = useUserInfoStore();
const options = ref<{grade: number, gradeName:string}[]>([]);

const {locale} = useI18n();
const headerInput = reactive<HeaderInput.Data>({
  grade: headerInputStore.inputData?.grade || 0,
  subjectName: headerInputStore.inputData.subjectName
});

const linkToHome = ()=> {
  router.push({
    path: '/'
  })
}

const route = useRoute();
const onLogout = ()=> {
  window.localStorage.removeItem(USER_INFO_KEY);
  router.replace("/login");

  showPopover.value = false;
  setTimeout(()=> {
    showPopover.value = true;
  },1000);
}
const getUserIcon = computed(()=> {
  return userInfoStore.userInfo?.user?.headportrait || userIcon
})
const onChange = ()=> {
  headerInputStore.setData(headerInput);
}
const onPreview = ()=> {
  pub.public("on-preview");
}
const toGenerate = ()=> {
  router.push({
    name: "question-add"
  })
}
watch(route, (newValue) => {
  isHomePage.value = newValue.name === "home";
  isTopicGeneratePage.value = newValue.name === "question-generation";
  if(newValue.name === "home" && userInfoStore.userInfo?.grade) {
    options.value = userInfoStore.userInfo.grade.map((it:Grade.Item)=> {
      return {
        gradeName: it.gradeName,
        grade: it.id
      }
    })
    options.value.unshift({
      gradeName: 'grade.no_restrictions',
      grade: 0
    })
  }
});

onBeforeMount(()=> {
  if(!userInfoStore.userInfo){
    onLogout()
  }
})
</script>

<style scoped lang="scss">
@import "@/theme.scss";

.user-info {
  position: relative;
  .user-name {
    position: relative;
    text-align: center;
    padding: 5px 10px;
    font-weight: 600;
    .user-icon {
      transform: translateY(5px);
      color: #4f8dd5;
      font-size: 18px;
      display: none;
    }
  }
  .logout {
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 50px;
  }
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;

  height: $header-bar-height;
  box-sizing: border-box;

  .left {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 24%;
    min-width: 440px;
    max-width: 465px;
  }
}
.search {
  background: #f0f3f6;
}
.header-preview {
  position: absolute;
  right: 145px;
  width: 130px;
  .preview-item {
    display: flex;
    justify-content: space-around;
    width: 80px;
    align-items: center;
    img {
      width: 24px;

    }
  }
}

.logo {
  width: 130px;
  height: auto;
  cursor: pointer;
}
.select {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
}
.select-label {

  font-weight: 600;
  color: #43536c;

  font-size: 16px;
  min-width: 90px;
  text-align: right;
  padding-right: 8px;
}
.right {
  display: flex;
  width: 650px;
  justify-content: space-between;
  align-items: center;
}

.select-wrapper {
  width: 130px;
  background: #eeeeee;
}
.users {
  position: relative;
  img[alt="renewal"] {
    position: absolute;
    bottom: 0;
    width: 80%;
    right: 0;
    transform: translate(8px, 5px);
  }
}
</style>
